<template>
  <div class="front serve">
    <div class="header-box">
      <Header></Header>
    </div>
    <div class="banner_bg">
			<img class="" src="https://image.utea88.com/statics/pc_b2b_banner.png" alt="">
    </div>
    <div class="transaction-container together">
      <div class="transaction-main">
        <div class="more" @click="$router.push({path: '/front-together-list'})">查看更多 &gt;</div>
        <div class="left">
					<div class="bg">1</div>
          <h2 class="title">买方挂牌</h2>
          <div class="desc">买方挂牌流程</div>
          <ul class="txt-wrapper">
            <li class="txt">
              <span class="num">1.</span>采购商发起求购需求
            </li>
            <li class="txt">
              <span class="num">2.</span>平台审核
            </li>
            <li class="txt">
              <span class="num">3.</span>供应方响应需求
            </li>
            <li class="txt">
              <span class="num">4.</span>采购商确认供应商生成订单
            </li>
            <li class="txt">
              <span class="num">5.</span>买方挂牌交易完成
            </li>
            <li class="txt">
              <span style="color:red" class="num">(生成订单按订单管理流程执行)</span>
            </li>
          </ul>
        </div>
        <div class="right">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <th>分类</th>
              <th>产品名称</th>
              <th>数量</th>
              <th>收货地址</th>
              <th>需求日期</th>
              <th>状态</th>
              <th width="110px;">操作</th>
            </tr>
            <tr v-for="item in matchList" :key="item.id">
              <td>{{item.categoryName}}</td>
              <td>{{item.name}}</td>
              <td>{{item.topNum}}</td>
              <td>{{item.startProvinceName}}{{item.startCityName}}</td>
              <td>{{item.createTime}}</td>
              <td>{{item.statusText}}</td>
              <td>
                <span class="btn"
                  @click="$router.push({path: '/front-together-details', query: {id: item.id}})">查看</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="transaction-container bidding">
      <div class="transaction-main">
        <div class="more" @click="$router.push({path: '/front-bidding-list'})">查看更多 &gt;</div>
        <div class="left">
					<div class="bg">2</div>
          <h2 class="title">竞价交易</h2>
          <div class="desc">竞价交易流程</div>
          <ul class="txt-wrapper">
            <li class="txt">
              <span class="num">1.</span>采购商(发布降价）/供应商（发布升价）发起竞价需求
            </li>
            <li class="txt">
              <span class="num">2.</span>平台审核
            </li>
            <li class="txt">
              <span class="num">3.</span>供应商/采购商交保证金后参与竞价报名
            </li>
            <li class="txt">
              <span class="num">4.</span>竞价结束系统自动锁定交易价生成订单
            </li>
            <li class="txt">
              <span style="color:red" class="num">(生成订单按订单管理流程执行)</span>
            </li>
          </ul>
        </div>
        <div class="right">
          <table cellpadding="0" cellspacing="0" style="table-layout: fixed;">
            <!-- <tr>
              <td width="33.3%" v-for="item in biddingList.slice(0, 3)" :key="item.id">
                <div class="name ell">{{item.name}}</div>
                <div class="specifications">数量：{{item.topNum}}</div>
                <div class="time">时间：{{item.createTime}}</div>
                <span class="btn"
                  @click="$router.push({path: '/front-bidding-details', query: {id: item.id}})">查看</span>
              </td>
              <template v-if="biddingList.slice(0, 3).length < 3">
                <td width="33.3%" v-for="item in 3-biddingList.slice(0, 3).length"></td>
              </template>
            </tr>
            <tr>
              <td width="33.3%" v-for="item in biddingList.slice(3, 6)" :key="item.id">
                <div class="name ell">{{item.name}}</div>
                <div class="specifications">数量：{{item.topNum}}</div>
                <div class="time">时间：{{item.createTime}}</div>
                <span class="btn"
                  @click="$router.push({path: '/front-bidding-details', query: {id: item.id}})">查看</span>
              </td>
              <template v-if="biddingList.slice(3, 6).length < 3">
                <td width="33.3%" v-for="item in 3-biddingList.slice(3, 6).length"></td>
              </template>
            </tr>
            <tr>
              <td width="33.3%" v-for="item in biddingList.slice(6, 9)" :key="item.id">
                <div class="name ell">{{item.name}}</div>
                <div class="specifications">数量：{{item.topNum}}</div>
                <div class="time">时间：{{item.createTime}}</div>
                <span class="btn"
                  @click="$router.push({path: '/front-bidding-details', query: {id: item.id}})">查看</span>
              </td>
              <template v-if="biddingList.slice(6, 9).length < 3">
                <td width="33.3%" v-for="item in 3-biddingList.slice(6, 9).length"></td>
              </template>
            </tr> -->


            <tr>
              <th>分类</th>
              <th>产品名称</th>
              <th>数量</th>
              <th>收货地址</th>
              <th>需求日期</th>
              <th>状态</th>
              <th width="110px;">操作</th>
            </tr>
            <tr v-for="item in biddingList" :key="item.id">
              <td>{{item.categoryName}}</td>
              <td>{{item.name}}</td>
              <td>{{item.topNum}}</td>
              <td>{{item.startProvinceName}}{{item.startCityName}}</td>
              <td>{{item.createTime}}</td>
              <td>{{item.statusText}}</td>
              <td>
                <span class="btn"
                  @click="$router.push({path: '/front-bidding-details', query: {id: item.id}})">查看</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
		<div class="transaction-container collection">
		  <div class="transaction-main">
		    <div class="more" @click="$router.push({path: '/front-collection-list'})">查看更多 &gt;</div>
		    <div class="left">
						<div class="bg">3</div>
		      <h2 class="title">集采交易</h2>
		      <div class="desc">集采交易流程</div>
		      <ul class="txt-wrapper">
		        <li class="txt">
		          <span class="num">1.</span>供应商发起集采需求
		        </li>
		        <li class="txt">
		          <span class="num">2.</span>平台审核
		        </li>
		        <li class="txt">
		          <span class="num">3.</span>采购方支付报名集采额10%款后参与集采交易
		        </li>
		        <li class="txt">
		          <span class="num">4.</span>数量总和达成系统自动生成订单
		        </li>
		        <li class="txt">
		          <span class="num">5.</span>集采交易完成
		        </li>
            <li class="txt">
		          <span style="color:red" class="num">(生成订单采购商支付完订单货款后，10%款项原路返回，生成订单按订单管理流程执行)</span>
		        </li>
		      </ul>
		    </div>
		    <div class="right">
		      <table cellpadding="0" cellspacing="0">
		        <tr>
		          <th>分类</th>
		          <th>产品名称</th>
		          <th>成团数量</th>
		          <th>预计最高价格</th>
		          <th>状态</th>
		          <th width="110px;">操作</th>
		        </tr>
		        <tr v-for="item in focusList" :key="item.id">
		          <td>{{item.categoryName}}</td>
		          <td>{{item.name}}</td>
		          <td>{{item.totalNum}}</td>
		          <td>{{item.topPrice}}元/{{item.unit}}</td>
		          <td>{{item.statusText}}</td>
		          <td>
		            <span class="btn"
		              @click="$router.push({path: '/front-collection-details', query: {id: item.id}})">查看</span>
		          </td>
		        </tr>
		      </table>
		    </div>
		  </div>
		</div>
    <div class="transaction-container">
      <div class="transaction-main">
        <div class="more" @click="$router.push({path: '/front-transaction-list'})">查看更多 &gt;</div>
        <div class="left">
					<div class="bg">4</div>
          <h2 class="title">委托交易</h2>
          <div class="desc">委托交易流程</div>
          <ul class="txt-wrapper">
            <li class="txt">
              <span class="num">1.</span>采购商/供应商发起委托交易请求（选择委托类型代买或代售）
            </li>
            <li class="txt">
              <span class="num">2.</span>平台审核委托交易
            </li>
            <li class="txt">
              <span class="num">3.</span>执行委托交易（代买需要按订单向平台支付货款，代卖需要将货物放到指定仓库）
            </li>
            <li class="txt">
              <span class="num">4.</span>交易完成
            </li>
            <li class="txt">
              <span style="color:red" class="num">(平台将依据实际需求采取相应的交易方式)</span>
            </li>
          </ul>
        </div>
        <div class="right">
          <ul class="top-wrapper">
            <li class="item">
              <img src="@/assets/front-img/4-1.png" alt class="icon" />
              <div class="titl">积压库存清货甩卖</div>
            </li>
            <li class="item">
              <img src="@/assets/front-img/4-2.png" alt class="icon" />
              <div class="titl">二手物料清货销售</div>
            </li>
            <li class="item">
              <img src="@/assets/front-img/4-3.png" alt class="icon" />
              <div class="titl">不良库存合理清理</div>
            </li>
            <li class="item">
              <img src="@/assets/front-img/4-4.png" alt class="icon" />
              <div class="titl">委托平台代买代购</div>
            </li>
          </ul>
          <table cellpadding="0" cellspacing="0">
            <tr>
              <th>委托编号</th>
              <th style="width: 200px;">服务类型</th>
              <th style="width: 50px;">价格</th>
              <th>委托说明</th>
              <th>申请时间</th>
              <th width="110px;">操作</th>
            </tr>
            <tr v-for="item in entrustList" :key="item.id">
              <td>{{item.identifier}}</td>
              <td>{{item.typeText}}</td>
              <td>{{item.topPrice}}</td>
              <td>{{item.remark}}</td>
              <td>{{item.createTime}}</td>
              <td>
                <span class="btn" @click="getDetails(item)">查看</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <el-dialog title="委托详情" :visible.sync="dialogFormVisible">
      <ul class="details-wrapper">
        <li class="item">
          <div class="th">委托编码</div>
          <div class="td">{{details.identifier}}</div>
        </li>
        <li class="item">
          <div class="th">委托服务</div>
          <div class="td">{{details.typeText}}</div>
        </li>
        <li class="item">
          <div class="th">申请时间</div>
          <div class="td">{{details.createTime}}</div>
        </li>
        <li class="item">
          <div class="th">委托说明</div>
          <div class="td">{{details.remark}}</div>
        </li>
        <li class="item">
          <div class="th">状态</div>
          <div class="td">{{details.statusText}}</div>
        </li>
      </ul>
    </el-dialog>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import {
  entrustPageByQo,
  focusPageByQo,
  biddingPageByQo,
  matchPageByQo
} from "@/api/front-transaction.js";
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
export default {
  data() {
    return {
      details: {},
      dialogFormVisible: false,
      matchList: [],
      focusList: [],
      biddingList: [],
      entrustList: []
    };
  },
  created() {
    this.getMatchList();
    this.getFocusList();
    this.getBiddingList();
    this.getEntrustList();
  },
  components: {
    Footer,
    Header
  },
  methods: {
    getDetails(item) {
      this.details = {};
      this.details = item;
      this.dialogFormVisible = true;
    },
		// 买方挂牌
    getMatchList() {
      const params = {
        pageNo: 1,
        pageSize: 7
      };
      matchPageByQo(params).then(res => {
				console.log(res);
        const { list } = res;
        this.matchList = list || [];
      });
    },
    getFocusList() {
      const params = {
        pageNo: 1,
        pageSize: 8
      };
      focusPageByQo(params).then(res => {
        const { list } = res;
        this.focusList = list || [];
      });
    },
    getBiddingList() {
      const params = {
        pageNo: 1,
        pageSize: 8
      };
      biddingPageByQo(params).then(res => {
        const { list } = res;
        this.biddingList = list || [];
      });
    },
    getEntrustList() {
      const params = {
        pageNo: 1,
        pageSize: 6
      };
      entrustPageByQo(params).then(res => {
        const { list } = res;
        this.entrustList = list || [];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.details-wrapper {
  border-top: 1px solid #ebeef5;
  .item {
    display: flex;
    border: 1px solid #ebeef5;
    border-top: none;
    .th {
      padding: 10px 8px 10px 0;
      width: 120px;
      line-height: 20px;
      font-size: 14px;
      text-align: right;
      color: #333;
      background-color: #f5f7fa;
    }
    .td {
      padding: 10px 0 10px 8px;
      flex: 1;
      line-height: 20px;
      font-size: 14px;
      color: #333;
    }
  }
}
.serve {
  .banner_bg {
		position: relative;
		width: 100%;
		height: 373px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .transaction-container {
    padding: 40px 0 20px;
    background-color: #f6f6f6;
    .transaction-main {
      position: relative;
      width: 1300px;
      margin: 0 auto;
      display: flex;
      border: 1px solid rgba(162, 162, 162, 0.45);
      .more {
        position: absolute;
        right: 0;
        top: -40px;
        padding: 0 10px;
        line-height: 40px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
      }
      .left {
        padding: 50px 15px 71px 15px;
        width: 260px;
        box-sizing: border-box;
        background: linear-gradient(0deg, #dedede, #ededed);
				.bg {
					position: absolute;
					left: 90px;
					// right: 0;
					bottom: 0;
					width: 260px;
					font-size: 300px;
					font-family: BerlinSansFBDemi;
					font-weight: bold;
					color: #fff;
					line-height: 300px;
					opacity: 0.3;
				}
        .title {
          font-size: 30px;
          font-weight: bold;
          color: #000000;
        }
        .desc {
          margin-top: 20px;
          font-size: 20px;
          color: #000000;
        }
        .txt-wrapper {
          margin-top: 37px;
          .txt {

            line-height: 28px;
            font-size: 16px;
            color: #555555;
            span {
              color: #000000;
            }
          }
        }
      }
      .right {
        flex: 1;
        background-color: #fff;
        .top-wrapper {
          display: flex;
          margin: 2px 0 5px;
          .item {
            flex: 1;
            padding: 10px 0 31px;
            border-right: 1px solid #f3f3f3;
            &:last-child {
              border: none;
            }
            .icon {
              display: block;
              margin: 0 auto;
              width: 86px;
              height: 86px;
            }
            .titl {
              margin-top: 18px;
              text-align: center;
              font-size: 16px;
              color: #555555;
            }
          }
        }
        table {
          width: 100%;
          border: none;
          th {
            height: 42px;
            font-weight: normal;
            background-color: #fafafa;
            text-align:center;
          }
          tr:last-child td {
            border-bottom: none;
          }
          td {
            height: 54px;
            text-align: center;
            border-bottom: 1px solid #f3f3f3;
            .btn {
              display: inline-block;
              vertical-align: middle;
              width: 59px;
              height: 30px;
              border: 1px solid #f3f3f3;
              border-radius: 3px;
              line-height: 30px;
              font-size: 12px;
              color: #333;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .together {
    .transaction-main {
      border: 1px solid #ffe793;
      .left {
        background-image: linear-gradient(
          90deg,
          rgb(255, 231, 147) 0%,
          rgb(255, 231, 147) 100%
        );
        .title {
          color: #965f29;
        }
        .desc {
          color: #965f29;
        }
        .txt-wrapper {
          .txt {
            span {
              color: #965f29;
            }
          }
        }
      }
    }
  }
  .collection {
    .transaction-main {
      border: 1px solid #d4f9ba;
      .left {
        background-image: linear-gradient(
          90deg,
          rgb(212, 249, 186) 0%,
          rgb(212, 249, 186) 100%
        );
        .title {
          color: #3d71aa;
        }
        .desc {
          color: #3d71aa;
        }
        .txt-wrapper {
          .txt {
            span {
              color: #3d71aa;
            }
          }
        }
      }
    }
  }
  .bidding {
    .transaction-main {
      border: 1px solid #9dceff;
      .left {
        background-image: linear-gradient(
          90deg,
          rgb(157, 206, 255) 0%,
          rgb(157, 206, 255) 100%
        );
        .title {
          color: #715fea;
        }
        .desc {
          color: #715fea;
        }
        .txt-wrapper {
          .txt {
            span {
              color: #715fea;
            }
          }
        }
      }
      // .right {
      //   table {
      //     border-collapse: collapse;
      //     width: 100%;
      //     border: 1px solid #fff;
      //     td {
      //       position: relative;
      //       padding: 21px 0 0 19px;
      //       height: 124px;
      //       text-align: left;
      //       border: 1px solid #f3f3f3;
      //       .name {
      //         line-height: 24px;
      //         font-size: 18px;
      //         color: #000000;
      //       }
      //       .specifications {
      //         margin-top: 10px;
      //         line-height: 21px;
      //         font-size: 15px;
      //         color: #333333;
      //       }
      //       .time {
      //         margin-top: 4px;
      //         line-height: 21px;
      //         font-size: 15px;
      //         color: #333333;
      //       }
      //       .btn {
      //         position: absolute;
      //         right: 21px;
      //         bottom: 19px;
      //         width: 48px;
      //         height: 25px;
      //         border: 1px solid #715fea;
      //         line-height: 25px;
      //         font-size: 14px;
      //         text-align: center;
      //         color: #715fea;
      //         cursor: pointer;
      //       }
      //     }
      //   }
      // }
    }
  }
}
</style>
